<!doctype html>
[#escape x as (x)!?html]
<html lang="[=lang!.lang]">
<head>
    <title>[=title!'无标题']</title>
    [#include "/layout/head.html"]
</head>
<body>
[#include "/layout/header.html"]
<!-- 主要内容 -->
<main class="pt-24 md:pt-28 pb-16 bg-white/95 dark:bg-neutral-800/95 transition-all duration-600 ease-in-out">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 英雄区域 -->
        <section class="mb-16 animate-on-scroll">
            <div class="rounded-3xl overflow-hidden shadow-xl">
                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div class="p-8 md:p-12 text-dark dark:text-white">
                        <h1 class="font-bold mb-4 leading-tight">探索知识的边界</h1>
                        <p class="mb-8 text-white/90 max-w-lg">
                            分享编程技巧、技术见解和创意灵感，帮助你在技术之路上不断前行。</p>
                        <div class="flex flex-wrap gap-4">
                            <a href="#"
                               class="font-medium px-6 py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl scale-hover">
                                开始探索
                            </a>
                            <a href="categories.html"
                               class="bg-transparent font-medium px-6 py-3 rounded-lg transition-all duration-200">
                                浏览分类
                            </a>
                        </div>
                    </div>
                    <div class="hidden md:block relative h-80">
                        <img src="https://picsum.photos/id/180/800/600" alt="探索知识"
                             class="absolute inset-0 w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </section>
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 主要内容区 -->
            <div class="lg:col-span-3">
                <!-- 精选专题 -->
                [#list topicPosts![]]
                <section class="mb-16 animate-on-scroll">
                    <h2 class="font-bold text-neutral-800 dark:text-white mb-8">
                        精选专题</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- 专题卡片 1 -->
                        [#items as item]
                        <div class="bg-white dark:bg-neutral-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 blog-card-shadow dark:dark-blog-card-shadow">
                            <div class="relative h-64 overflow-hidden">
                                <img src="[=item.postImage!'']" alt="[=item.postTitle!'']"
                                     class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                                <div class="absolute bottom-0 left-0 p-6 text-white">
                                    <h3 class="text-2xl font-bold mb-2">[=item.postTitle!'']</h3>
                                    <p class="text-white/90 mb-3">[=item.postExcerpt!'']</p>
                                    <div class="flex space-x-2">
                                        <span class="text-sm bg-white/20 px-3 py-1 rounded-full backdrop-blur-sm">[=item.postCount!0]篇文章</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-6">
                                <p class="text-neutral-600 dark:text-neutral-300 mb-4">
                                    [=item.postContent!'']
                                </p>
                                <a href="/topics/[=item.id!'']"
                                   class="text-primary dark:text-primary hover:text-primary/80 dark:hover:text-primary/80 font-medium flex items-center scale-hover">
                                    浏览专题
                                    <i class="fa-solid fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                        [/#items]
                    </div>
                </section>
                [#else]
                [/#list]
                <!-- 最新文章 -->
                [#list lastPosts![]]
                <section class="mb-16 animate-on-scroll">
                    <div class="flex justify-between items-center mb-8">
                        <h2 class="font-bold text-neutral-800 dark:text-white">
                            最新文章</h2>
                        <a href="/articles"
                           class="font-medium flex items-center">
                            查看全部 <i class="fa-solid fa-arrow-right ml-2"></i>
                        </a>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- 文章卡片 1 -->
                        [#items as item]
                        <article
                                class="bg-white dark:bg-neutral-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 blog-card-shadow dark:dark-blog-card-shadow">
                            <div class="relative h-48 overflow-hidden">
                                <img src="[=item.postImage!'']" alt="[=item.postTitle!'']"
                                     class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                                [#if item.category??]
                                <div class="absolute top-4 left-4 bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">
                                    [=item.category.name!'']
                                </div>
                                [/#if]
                            </div>
                            <div class="p-6">
                                <div class="flex items-center space-x-2 text-sm text-neutral-500 dark:text-neutral-400 mb-3">
                                    <span><i class="fa-solid fa-calendar-alt mr-1"></i>[=item.postModified!'']</span>
                                    <span><i class="fa-solid fa-user mr-1"></i>[=item.postAuthorName!'']</span>
                                    <span><i class="fa-solid fa-eye mr-1"></i> [=item.postViews!0]</span>
                                </div>
                                <h3 class="text-xl font-bold mb-3 text-neutral-800 dark:text-white hover:text-primary dark:hover:text-primary transition-colors duration-200">
                                    <a href="/articles/[=item.id!'']">[=item.postTitle!'']</a>
                                </h3>
                                <p class="text-neutral-600 dark:text-neutral-300 mb-4 line-clamp-3">
                                    [=item.postExcerpt!'']
                                </p>
                                <div class="flex justify-between items-center">
                                    [#list item.tags![]]
                                    <div class="flex space-x-2">
                                        [#items as tag]
                                        <a href="/tags/[=tag.slug!'']"
                                           class="text-xs text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-600 px-3 py-1 rounded-full  hover:text-neutral-300 transition-colors duration-200">[=tag.name!'']</a>
                                        [/#items]
                                        [#--
                                        <a href="#"
                                           class="text-xs text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-600 px-3 py-1 rounded-full  hover:text-neutral-300 transition-colors duration-200">前端</a>
                                        --]
                                    </div>
                                    [/#list]
                                    <a href="/articles/[=item.id!'']"
                                       class="font-medium flex items-center">
                                        阅读更多
                                        <i class="fa-solid fa-angle-right ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                        [/#items]
                    </div>

                    <!-- 加载更多按钮 -->
                    <div class="mt-10 text-center">
                        [#if lastPosts??]
                        <a href="/?lastDate=[=lastPosts[-1].postDate!'']"
                           class="bg-white dark:bg-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 text-neutral-800 dark:text-neutral-200 font-medium px-8 py-3 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg scale-hover">
                            加载更多 <i class="fa-solid fa-refresh ml-2"></i>
                        </a>
                        [#else]
                        <span
                           class="bg-white dark:bg-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-600 text-neutral-800 dark:text-neutral-200 font-medium px-8 py-3 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg scale-hover">
                            没有了 <i class="fa-solid fa-refresh ml-2"></i>
                        </span>
                        [/#if]
                    </div>
                </section>
                [/#list]
            </div>
            [#include "layout/aside.html"]
        </div>
    </div>
</main>
[#include "/layout/footer.html"]
</body>
</html>
[/#escape]